<template>
  <header class="header">
    <div class="com">
      <div class="logo">
        <a href="#/">
          <img src="@/assets/icon/common/logo.png" alt="">
        </a>
      </div>
      <div class="search"  @click="goSearch">
        <form action="/">
          <van-search
            v-model="kw"
            shape="round"
            
            placeholder="搜索"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
      </div>
      <a class="app"> 打开APP </a>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  props:{
    kw:{
      type:String
    }
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    goSearch(){
      this.$router.push('/search/')
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 10px 15px 10px;
  background-color: #fff;
  .com {
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    .app {
      display: block;
      width: 68px;
      height: 30px;
      font-size: 13px;
      text-align: center;
      line-height: 30px;
      color: #f66847;
      border: 1px solid #f66847;
      border-radius: 15px;
    }
    .logo {
      a {
        font-size: 17px;
        font-weight: 700px;
        color: #fa2800;
      }
    }

    .search{
        /deep/.van-search{
            padding: 0;
            width: 182px;
            height: 30px;
            /deep/.van-field__control{
               
            }
        }
    }
  }
}
</style>

